import React, { useEffect, useState } from 'react';
import { NetworkStatus } from '@apollo/client';
import {
  Box,
  Grid,
  GridItem,
  Icon,
  ListBase,
  ListButton,
  makeToast,
  Modal,
  Text,
} from '@nova-hf/ui';
import ContractsHeader from 'beta/components/contracts-header/ContractsHeader';
import { ErrorBanner } from 'beta/components/error/ErrorBanner';
import { AlltSamanBar } from 'beta/containers/allt-saman-bar/AlltSamanBar';
import BundleContainerHeader from 'beta/containers/bundle-container/BundleContainerHeader';
import BundleContainerList from 'beta/containers/bundle-container/BundleContainerList';
import { PaymentOptions } from 'beta/containers/payment-history/PaymentOptions';
import { PaymentPostponement } from 'beta/containers/payment-history/PaymentPostponement';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  PlanType,
  SubscriptionPeriodStatus,
  useContractInvoicesQuery,
  useContractQuery,
  useContractSlotsQuery,
  usePayInvoiceMutation,
  usePostponeInvoiceMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type AlltSamanContainerProps = {
  isLoading?: boolean;
};

const COLOR = 'orange';

const AlltSamanContainer = ({ isLoading }: AlltSamanContainerProps) => {
  const { t } = useTranslation(['alltSaman', 'errors']);
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const contractId = router.query.contractId ?? '';
  const [payInvoiceMutation] = usePayInvoiceMutation();
  const [postponeInvoiceMutation] = usePostponeInvoiceMutation();
  const [paymentModal, setPaymentModal] = useState(false);
  const [postponeModal, setPostponeModal] = useState(false);
  const {
    data: slotsData,
    loading: slotsLoading,
    error: slotsError,
    networkStatus: slotsNetworkStatus,
    refetch: slotsRefetch,
  } = useContractSlotsQuery({
    variables: {
      input: {
        contractId: contractId.toString(),
      },
    },
  });
  const {
    data: contractData,
    loading: contractLoading,
    error: contractError,
    networkStatus: contractNetworkStatus,
    refetch: contractRefetch,
  } = useContractQuery({
    variables: {
      input: {
        id: contractId.toString(),
      },
    },
  });

  const {
    data: invoiceData,
    loading: invoiceLoading,
    refetch: invoiceRefetch,
  } = useContractInvoicesQuery({
    variables: {
      input: {
        contractId: contractId.toString(),
      },
    },
  });

  const invoices = invoiceData?.contractsInvoices?.invoices;
  const unpaidInvoices = invoices?.filter(
    (invoice) => invoice?.status !== SubscriptionPeriodStatus.Paid,
  );
  const newestUnpaidInvoice = unpaidInvoices ? unpaidInvoices[0] : undefined;

  const refetch = () => {
    slotsRefetch();
    contractRefetch();
    invoiceRefetch();
  };

  const mobileItems = slotsData?.contractSlots?.filter((c) => c?.slug === 'mobile-device');
  const internetItems = slotsData?.contractSlots?.filter((c) => c?.slug === 'internet');
  const mobiles = mobileItems && mobileItems.length > 0 ? mobileItems[0] : undefined;
  const internet = internetItems && internetItems.length > 0 ? internetItems[0] : undefined;
  const contract = contractData?.contract;
  const contractItems = contract?.contractItems;

  const onPay = async () => {
    try {
      if (newestUnpaidInvoice?.id) {
        const { data: payInvoiceData } = await payInvoiceMutation({
          variables: {
            input: {
              id: newestUnpaidInvoice.id,
            },
          },
        });
        if (payInvoiceData) {
          makeToast.success(t('alltSaman:alltSaman.paymentSuccess'), '');
        }
      }
    } catch (error) {
      if (error instanceof Error) {
        makeToast.danger(t('alltSaman:alltSaman.paymentFailed'), error.message);
        setPaymentModal(true);
      }
    }
  };

  const onPostpone = async () => {
    try {
      if (newestUnpaidInvoice?.id) {
        const { data: postponeInvoiceData } = await postponeInvoiceMutation({
          variables: {
            input: {
              id: newestUnpaidInvoice.id,
            },
          },
        });
        if (postponeInvoiceData) {
          makeToast.success(t('alltSaman:alltSaman.postponeSuccess'), '');
          setPostponeModal(false);
        }
      }
    } catch (error) {
      if (error instanceof Error) {
        makeToast.danger(t('alltSaman:alltSaman.postponeFailed'), error.message);
        setPostponeModal(false);
      }
    }
  };

  const back = () => {
    setPaymentModal(false);
    setPostponeModal(false);
  };

  const postpone = () => {
    setPostponeModal(true);
  };

  const pillText =
    contract?.variant?.__typename === 'SubscriptionVariant'
      ? contract?.variant?.planType === PlanType.Postpaid
        ? t('alltSaman.postPaid')
        : contract?.variant?.planType === PlanType.Prepaid
        ? t('alltSaman.prePaid')
        : ''
      : '';

  useEffect(() => {
    refetch();
  }, []);

  if (
    slotsLoading ||
    !slotsData ||
    contractLoading ||
    !contractData ||
    slotsError ||
    contractError ||
    invoiceLoading ||
    isLoading
  ) {
    return (
      <>
        {slotsLoading ||
          contractLoading ||
          invoiceLoading ||
          (isLoading && <ContractsHeader title={t('alltSaman.loadingTitle')} />)}
        <ErrorBanner
          eyebrowTexts={[
            t('errors:thjonustur.eyebrows.1'),
            t('errors:thjonustur.eyebrows.2'),
            t('errors:thjonustur.eyebrows.3'),
          ]}
          titles={[
            t('errors:thjonustur.titles.1'),
            t('errors:thjonustur.titles.2'),
            t('errors:thjonustur.titles.3'),
          ]}
          descriptions={[
            t('errors:thjonustur.descriptions.1'),
            t('errors:thjonustur.descriptions.2'),
            t('errors:thjonustur.descriptions.3'),
          ]}
          icon="zap"
          color="attention"
          showLoading={
            slotsLoading ||
            contractLoading ||
            slotsNetworkStatus === NetworkStatus.refetch ||
            contractNetworkStatus === NetworkStatus.refetch
          }
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );
  }

  return (
    <Box>
      <Modal
        ariaLabel="paymentOptions"
        onVisibilityChange={(isVisible) => setPaymentModal(isVisible)}
        isVisible={paymentModal}
      >
        <PaymentOptions color={COLOR} postpone={postpone} />
      </Modal>
      <Modal
        ariaLabel="postponePayment"
        onVisibilityChange={(isVisible) => setPostponeModal(isVisible)}
        isVisible={postponeModal}
      >
        <PaymentPostponement
          color={COLOR}
          cancel={back}
          postponeDate={newestUnpaidInvoice?.periodEnd ? newestUnpaidInvoice.periodEnd : ''}
          postpone={onPostpone}
        />
      </Modal>
      {newestUnpaidInvoice && (
        <AlltSamanBar
          isLoading={contractLoading}
          color={COLOR}
          invoice={newestUnpaidInvoice}
          onButtonClick={() => onPay()}
          onPostpone={postpone}
        />
      )}
      <Box>
        <BundleContainerHeader
          contractName={contract?.variant?.name ?? ''}
          contractId={contract?.id ?? ''}
          contractCharge={contract?.variant?.monthlyCharge ?? 0}
          contractPeriodEnd={contract?.latestPeriodEnd ?? ''}
          color={COLOR}
        />
        {contractItems && (
          <Box marginBottom={3}>
            <BundleContainerList
              contractItems={contractItems}
              payerName={contract?.payerName ?? ''}
              color={COLOR}
              pillText={pillText}
            />
          </Box>
        )}
        {!!internet?.freeSlots && internet.freeSlots > 0 && (
          <Box marginBottom={3}>
            <ListBase>
              <Grid
                gridTemplate={{ sm: 6, lg: 12 }}
                columnGap={{ sm: 3, lg: 2 }}
                alignItems="center"
              >
                <GridItem gridColumn={{ sm: 'span1' }}>
                  <Icon icon="internet" color="grey300" size={40} />
                </GridItem>

                <GridItem gridColumn={{ sm: 'span4' }}>
                  <Text variant="pLargeBold">{t('alltSaman.internet')}</Text>
                  <Text variant="pSmallRegular">{t('alltSaman.addInternet')}</Text>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span7' }}>
                  <Box
                    display="flex"
                    flexDirection="row"
                    justifyContent="flex-end"
                    alignItems="center"
                  >
                    <Box marginRight={8}>
                      <Text variant="pLargeBold" color="orange">
                        {t('alltSaman.freeSeat')}
                      </Text>
                    </Box>
                    <ListButton
                      text={t('alltSaman.addToSeat')}
                      icon="longArrowRight"
                      wrapper={(children) => (
                        <Link
                          passHref
                          href={`/beta/${customerId}/askriftir/${contractId}/baeta-vid/internet`}
                          legacyBehavior
                        >
                          {children}
                        </Link>
                      )}
                    />
                  </Box>
                </GridItem>
              </Grid>
            </ListBase>
          </Box>
        )}
        {!!mobiles?.freeSlots && mobiles.freeSlots > 0 && (
          <Box marginBottom={3}>
            <ListBase
              linkWrapper={(children) => (
                <Link
                  passHref
                  href={`/beta/${customerId}/askriftir/${contractId}/baeta-vid/sima`}
                  legacyBehavior
                >
                  {children}
                </Link>
              )}
            >
              <Grid
                gridTemplate={{ sm: 6, lg: 12 }}
                columnGap={{ sm: 3, lg: 2 }}
                alignItems="center"
              >
                <GridItem gridColumn={{ sm: 'span1' }}>
                  <Icon icon="mobilePlus" color="grey300" size={40} />
                </GridItem>

                <GridItem gridColumn={{ sm: 'span4' }}>
                  <Text variant="pLargeBold">{t('alltSaman.mobile')}</Text>
                  <Text variant="pSmallRegular">{t('alltSaman.addMobile')}</Text>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span7' }}>
                  <Box
                    display="flex"
                    flexDirection="row"
                    justifyContent="flex-end"
                    alignItems="center"
                  >
                    <Box marginRight={8}>
                      <Text variant="pLargeBold" color="orange">
                        {t('alltSaman.freeSeat')}
                      </Text>
                    </Box>
                    <ListButton
                      text={t('alltSaman.addToSeat')}
                      icon="longArrowRight"
                      wrapper={(children) => (
                        <Link
                          passHref
                          href={`/beta/${customerId}/askriftir/${contractId}/baeta-vid/sima`}
                          legacyBehavior
                        >
                          {children}
                        </Link>
                      )}
                    />
                  </Box>
                </GridItem>
              </Grid>
            </ListBase>
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default AlltSamanContainer;